<template>
  <div style="height:100%;">
    <div class="tableTittle" v-if="flag !='look'">
      <div><span class="fontImpact">2</span><span>保养列表</span></div>
       <el-button size="mini" type="primary" style="float:right;" v-if="$parent.userOpernation.add.display" @click = "addUpkeep">添加</el-button>
    </div>
    <div class="penalrow selectw100" v-if="flag =='look'">
      <div class="inlineblock verticalmiddle infoitem">
        <div class="inlineblock verticalmiddle">
          开始日期
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker size="mini" v-model="demand.bTime" type="date" placeholder="选择起始日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd"
            style="width:100%;" @change="doSearch">
          </el-date-picker>
        </div>
      </div>
      <div class="inlineblock verticalmiddle infoitem">
        <div class="inlineblock verticalmiddle">
          结束日期
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker size="mini" v-model="demand.eTime" type="date" placeholder="选择结束日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd"
            style="width:100%;" @change="doSearch">
          </el-date-picker>
        </div>
      </div>
      <el-button type="warning" size="mini" @click="doSearch" class="searchIcon">搜索</el-button>
    </div>
    <div style="height:calc(100% - 40px);">
      <el-table :data="tableData" style="width: 100%;height:calc(100% - 40px)" class="tableCon" size="mini" key="tableData">
        <el-table-column label="序号" min-width="50px">
          <template slot-scope="scope">
            {{scope.$index+(readQuery.page - 1) * readQuery.pageCount + 1}}
          </template>
        </el-table-column>

        <!--<el-table-column property="equipmentName" label="仪器名称" show-overflow-tooltip min-width="100px">
        </el-table-column>-->
        <el-table-column property="executorName" label="保养人" min-width="100px">
        </el-table-column>

        <el-table-column property="planName" label="计划" min-width="100px" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             {{scope.row.planName== '' || scope.row.planName == undefined ?'---':scope.row.planName}}
          </template>
        </el-table-column>

        <el-table-column property="status" label="状态" min-width="100px">
          <template slot-scope="scope">
            {{scope.row.status=='321'?'待保养':(scope.row.status=='322'?'已保养':'已废弃')}}
          </template>
        </el-table-column>
        <el-table-column property="executeDate" label="保养日期" v-if="flag != 'edit'" key="executeDate" min-width="140px">
					<template slot-scope="scope">
						{{scope.row.hasOwnProperty('executeDate')?scope.row.executeDate.split(' ')[0]:'---'}}
					</template>
				</el-table-column>
        <el-table-column property="createTime" key="date" label="创建日期" min-width="145px">
          <template slot-scope="scope">
            {{scope.row.hasOwnProperty('createTime')?scope.row.createTime.split('.')[0]:'---'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="showButton.add && $parent.userOpernation.update.display && flag == 'edit'" key="operate"
          min-width="70px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="detail(scope.$index, scope.row,'执行')" :disabled = "!scope.row.display">执行</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="flag == 'look'" key="operate1" min-width="70px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="detail(scope.$index, scope.row,'详情')" v-if="flag == 'look'">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block changepages" v-if="flag == 'look'">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20, 30, 40]"
          :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
        </el-pagination>
      </div>
    </div>
    <div v-if= "detailShow">
      <upkeep-detail  :fRefId="fRefId" :title="title" v-bind.sync="$props" :selectrow="selectrow"></upkeep-detail>
    </div>
    <!--<upkeep-detail :addVisible.sync="detailShow" :fRefId="fRefId" :title="title" v-bind.sync="$props"></upkeep-detail>-->
    <div v-if='upKeepShow'>
			<add-upkeep :equipmentId="demand.equipmentId" :upKeepEditData="upKeepEditData" :flag="upkeepFlag"></add-upkeep>
		</div>
  </div>
</template>

<script>
  import upkeepDetail from './page/upkeepDetail'
  import addUpkeep from './page/addUpkeep' //保养计划
  export default {
    components: {
      upkeepDetail,
      addUpkeep
    },
    data() {
      return {
        detailShow: false,
        page: 1,
        demand: {
          equipmentId: '',
          maintainType: 'MA01',
          bTime: '',
          eTime: '',
          status: 321,

        },
        pageinfo: {},
        tableData: [],
        fRefId: '',
        title: '',
        readQuery: {
          page: 1,
          pageCount: 20,
        },
        rowNumber: 0,
        upKeepShow:false,
        upkeepFlag:"",
        upKeepEditData:{},
        selectrow:{}
      }
    },
    computed: {
      tabDivHeight() {
        return (window.innerHeight - 460)
      }
    },
    props: {
      upkeepRecordData: Object,
      showButton: Object,
      flag: String
    },
    mounted() {

      if (this.flag == 'look') {
        this.demand.equipmentId = this.upkeepRecordData.id
      } else {
        this.demand.equipmentId = this.upkeepRecordData.equipmentId
      }
      this.init()
    },
    watch: {
      readQuery: {
        handler(val, oldVal) {
          this.init()
        },
        deep: true
      },
    },
    methods: {
      doSearch(){
        this.readQuery.page = 1;
        this.init()
      },
      init() {
        let url;
        if (this.flag == 'look') {
          url = 'resource/getMaintenanceRecordList.htm'
          this.demand.page = this.readQuery.page
          this.demand.pageCount = this.readQuery.pageCount
        } else {
          if(this.demand.equipmentId == undefined){
            return;
          }else{
            url = 'resource/readMaintenanceListed.htm'
          }

        }
        this.$http({
          apiUrl: url,
          method: 'post',
          params: this.demand,
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data
            this.pageinfo = res.pageinfo
            if (this.flag == 'look') {
              if (!res.pageinfo) {
                this.rowNumber = 0;
              } else if (res.pageinfo && !res.pageinfo.rowNumber) {
                this.rowNumber = 0;
              } else {
                this.rowNumber = res.pageinfo.rowNumber;
              }
            }
          }
        })
      },
      addUpkeep(){
        this.upkeepFlag = 'look'
				this.upKeepShow = true
      },
      detail(index, row, title) {
        this.fRefId = row.id
        if (title == '执行') {
          this.title = '仪器保养'
        } else if (title == '详情') {
          this.title = '维护任务详情'
          this.selectrow = row
        }
        this.detailShow = true
      },
      add() {
        this.detailShow = true
      },
      handleSizeChange(val) {
        this.readQuery.pageCount = val;
      },
      handleCurrentChange(val) {
        this.readQuery.page = val;
      },
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
